<template>
  <div class="my-container" v-if="userInfo">
    <div class="header">
      <van-image round width="6rem" height="6rem" :src="userInfo.avatar" />
      <p class="nickname">{{ userInfo.username }}</p>
    </div>
    <div class="body">
      <van-cell title="会员中心" is-link />
      <van-cell title="我的订单" @click="$router.push('/order')" is-link />
      <van-cell title="收货地址" is-link />
      <van-cell title="我的足迹" is-link />
      <van-cell title="我的收藏" is-link />
      <van-cell title="意见反馈" is-link />
    </div>
    <div class="footer">
      <van-button block round type="danger" @click="logout">退出</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUserInfo } from '@/api/user'
import { showConfirmDialog } from 'vant'
// import 'vant/es/dialog/style/index'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const router = useRouter()
const userInfo = ref(null)

const getUserInfoData = async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
}

const logout = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定退出吗？',
    confirmButtonColor: '#c82519'
  })
    .then(() => {
      // on confirm
      // 清空token
      userStore.setUserInfo({})

      // 跳转登录页面
      router.replace('/login')
    })
    .catch(() => {
      // on cancel
    })
}

getUserInfoData()
</script>

<style lang="scss" scoped>
.my-container {
  .header {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c82519;
    flex-direction: column;
    .nickname {
      margin-top: 20px;
      color: white;
      font-size: 18px;
    }
  }
  .footer {
    padding: 30px 10px 0px;
  }
}
</style>
